<!--

    Copyright 2005-2012 The Kuali Foundation

    Licensed under the Educational Community License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.opensource.org/licenses/ecl2.php

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>How to include additional info in day cells</title>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="lang/calendar-en.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
<script type="text/javascript">
  // define info for dates in this table:
  var dateInfo = {
    "20050308" : "Mishoo's&nbsp;birthday",
    "20050310" : "foo",
    "20050315" : "bar",
    "20050318" : "25$",
    "20050324" : "60$"
  };
</script>
<style type="text/css">
  @import url(calendar-win2k-1.css);
  .calendar .inf { font-size: 80%; color: #444; }
  .calendar .wn { font-weight: bold; vertical-align: top; }
</style>
</head>

<body>
<h1>How to include additional info in day cells</h1>

<div id="flatcal" style="float: right"></div>

<script type="text/javascript">
  function getDateText(date, d) {
    var inf = dateInfo[date.print("%Y%m%d")];
    if (!inf) {
      return d + "<div class='inf'>&nbsp;</div>";
    } else {
      return d + "<div class='inf'>" + inf + "</div>";
    }
  };
  function flatCallback(cal) {
    if (cal.dateClicked) {
      // do something here
      window.status = "Selected: " + cal.date;
      var inf = dateInfo[cal.date.print("%Y%m%d")];
      if (inf) {
        window.status += ".  Additional info: " + inf;
      }
    }
  };
  Calendar.setup({
     flat: "flatcal",
     dateText: getDateText,
     flatCallback: flatCallback
  });
</script>

<p>The idea is simple:</p>

<ol>
	<li>
	<p>Define a callback that takes two parameters like this:</p>
	<pre>function getDateText(date, d)</pre>
	<p>This function will receive the date object as the first parameter
	and the current date number (1..31) as the second (you can get it as
	well by calling date.getDate() but since it's very probably useful I
	thought I'd pass it too so that we can avoid a function call).</p>
	<p>This function <em>must</em> return the text to be inserted in the
	cell of the passed date. That is, one should at least "return d;".</p>
	</li>
	<li>Pass the above function as the "dateText" parameter to
	Calendar.setup.</li>
</ol>

<p>The function could simply look like:</p>

<pre>  function getDateText(date, d) {
    if (d == 12) {
      return "12th";
    } else if (d == 13) {
      return "bad luck";
    } /* ... etc ... */
  }</pre>

<p>but it's easy to imagine that this approach sucks. For a better way,
see the source of this page and note the usage of an externally defined
"dateText" object which maps "date" to "date info", also taking into
account the year and month. This object can be easily generated from a
database, and the getDateText function becomes extremely simple (and
static).</p>

<p>Cheers!</p>

<hr />
<address><a href="http://dynarch.com/mishoo/">mishoo</a></address>
<!-- hhmts start -->
Last modified: Sat Mar 5 17:18:06 EET 2005
<!-- hhmts end -->
</body>
</html>
